import { FC } from 'react'
import { useNavigate } from 'react-router-dom'
import { Result, Button } from 'antd'
import { RouteProps, useLocation } from 'react-router'

import { useAppSelector } from '@/store'

const PrivateRoute: FC<RouteProps> = props => {
  const { token } = useAppSelector(state => state.user)

  const navigate = useNavigate()
  const location = useLocation()

  return token ? (
    (props.element as React.ReactElement)
  ) : (
    <Result
      status='403'
      title='403'
      subTitle='对不起，您没有权限访问此页。'
      extra={
        <Button
          type='primary'
          onClick={() => navigate(`/login${'?from=' + location.pathname}`, { replace: true })}
        >
          去登录
        </Button>
      }
    />
  )
}

export default PrivateRoute
